<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    body {
      background: #7d8392;
    }

    .container header {
      background: #266986;
      padding: 15px;
      color: #fff;
      line-height: 50px;
    }

    .contact-list-wrapper {
      padding: 20px 30px;
    }

    .search-box {
      position: relative;
      margin-bottom: 20px;
    }

    .search-box input {
      width: 100%;
      height: 40px;
      border-radius: 2px;
      border: 0;
      text-indent: 10px;
    }

    #btn-clear {
      position: absolute;
      right: 10px;
      top: 10px;
      display: none;
      cursor: pointer;
    }

    .contact-list li {
      background: #fff;
      margin-bottom: 20px;
      border-radius: 2px;
      padding: 20px;
    }

    .contact-list li p.name {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>电话薄</header>
    <div class="contact-list-wrapper">
      <div class="search-box">
        <input id="search-input" type="text" placeholder="搜索联系人">
        <span id="btn-clear">X</span>
      </div>
      <ul class="contact-list">
        <!-- <li>
          <p class="name">xxx</p>
          <p class="tel">1234678</p>
        </li>
        <li>
          <p class="name">xxx</p>
          <p class="tel">1234678</p>
        </li> -->
      </ul>
    </div>
  </div>
  <script>
    const data = [
    { name: "Amy", tel: "12345678980" },
    { name: "Bob", tel: "12345678981" },
    { name: "Danny", tel: "18539284752" },
    { name: "Jennie", tel: "18539284753" },
    ]
    const contactList  = document.querySelector('.contact-list')
    const searchInput = document.querySelector('#search-input')
   
    render()
    function render() {
      data.forEach(item => {
        contactList.insertAdjacentHTML('beforeend', `
        <li>
          <p class="name">${item.name}</p>
          <p class="tel">${item.tel}</p>
        </li>
        `)
      })
    }
  </script>
</body>
</html>